<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影院管理</title>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <style>
    .header{
      position: relative;
      width: 100%;
      height: 40px;
    }
    .header>.add{
      position: absolute;
      right: 0;
    }
    .center{
      height: 102px;
      width: 100%;
      position: relative;
    }
    .center .c1{
      position: absolute;
      top: -40px;
      left: 0px;
    }
    .center .c2{
      position: absolute;
      top: -40px;
      left: 300px;
    }
    .center .c3{
      position: absolute;
      top: -40px;
      left: 600px;
    }
    .center .c4{
      position: absolute;
      top: -40px;
      right: 115px;
    }
    .footer{
      position: relative;
      top: -72px;
    }
    .final{
      position: relative;
      width: 100%;
      top: -72px;
      display: flex;
      justify-content: center;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="header">
    <el-button class="add" type="primary" @click="show">新增影院</el-button>
  </div>
  <div class="center">
    <el-form>
      <el-form-item class="c1" label="影院名字:" label-width="80px">
        <el-input v-model="studios.name" style="width: 200px;" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item class="c2" label="影院地址:" label-width="80px">
        <el-input v-model="studios.addr" style="width: 200px;" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item class="c3" label="营业状态:" label-width="80px">
        <el-select v-model="studios.status"  placeholder="请选择营业状态">
          <el-option label="营业中" value="营业中"></el-option>
          <el-option label="休息中" value="休息中"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="c4" label="" label-width="80px">
        <el-button class="query" type="primary" @click="queryStudios">查询影院</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="footer">
    <el-table
            :data="tableData.records"
            border
            style="width: 100%">
      <el-table-column
              align="center"
              fixed
              prop="id"
              label="编号"
              width="50">
      </el-table-column>
      <el-table-column
              align="center"
              prop="image"
              label="影院图片"
              width="100">
        <template slot-scope="scope">
          <img :src="scope.row.image" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column
              align="center"
              prop="name"
              label="影院名称"
              width="250">
      </el-table-column>
      <el-table-column
              align="center"
              prop="addr"
              label="影院地址"
              width="420">
      </el-table-column>
      <el-table-column
              align="center"
              prop="des"
              label="影院详情"
              width="380">
      </el-table-column>
      <el-table-column
              align="center"
              prop="status"
              label="影院状态"
              width="120">
      </el-table-column>
      <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="300">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '营业中'" @click="del(scope.row)" type="text" size="small">打烊</el-button>
          <el-button v-if="scope.row.status === '休息中'" @click="del(scope.row)" type="text" size="small">上线</el-button>
          <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="final">
    <el-pagination class="c1"
            layout="prev, pager, next"
            :page-size="this.size"
            :current-page="this.current"
            @current-change="changeCurrent"
            :total="this.tableData.total">
    </el-pagination>
  </div>
<!--  -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
  <el-dialog position="relative" :title="num == 1 ? '新增影院' : '编辑影院'" :visible.sync="dialogFormVisible" width="600px">
    <el-form>
      <el-form-item label="影院名称:" label-width="80px">
        <el-input v-model="studios.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item v-if="msgs.name" label="" label-width="80px">
        <el-input style="color: red" v-html="msgs.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="影院地址:" label-width="80px">
        <el-input v-model="studios.addr" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item v-if="msgs.addr" label="" label-width="80px">
        <el-input style="color: red" v-html="msgs.addr" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:" label-width="80px">
        <el-input v-model="tel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="营业时间:" label-width="80px">
        <el-input v-model="time" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item v-if="msgs.des" label="" label-width="80px">
        <el-input style="color: red" v-html="msgs.des" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图片:" label-width="80px">
        <el-input :readonly="true" placeholder="只读"  v-model="studios.image" autocomplete="off">
          <el-upload slot="append"
                    name="file"
                    action="../upload?webPath=/upload/img/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
            <el-button icon="el-icon-upload2"></el-button>
          </el-upload>
        </el-input>
      </el-form-item>
      <el-form-item v-if="msgs.image" label="" label-width="80px">
        <el-input style="color: red" v-html="msgs.image" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="营业状态:" label-width="80px">
        <el-select v-model="studios.status"  placeholder="请选择营业状态">
          <el-option label="营业中" value="营业中"></el-option>
          <el-option label="休息中" value="休息中"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="msgs.status" label="" label-width="80px">
        <el-input style="color: red" v-html="msgs.status" autocomplete="off"></el-input>
      </el-form-item>
      <img style="width: 100px; height: 100px; position:absolute; right: 20px; bottom: 67px;" :src="studios.image">
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addStudios(num)">确 定</el-button>
    </div>
  </el-dialog>
</div>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      dialogFormVisible:false,
      tel:'',
      time:'',
      studios:{name:'',addr:'',des:'',image:'',status:''},
      msgs:{name:'',addr:'',des:'',image:'',status:''},
      tableData:[],
      size:5,
      current:1,
      num:1
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.studios.image = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image') == 0 ;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是图片格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      addStudios(num){
        this.studios.des = "营业时间: "+this.time+", 电话: "+this.tel;
        let url='';
        if(num == 1){
           url = "../studios/addStudios";
        }else if(num == 2){
           url = "../studios/updateStudios";
        }
        axios.post(url,this.studios).then(res=>{
          this.msgs={name:'',addr:'',des:'',image:'',status:''};
            if(res.data.code == 1){
              this.dialogFormVisible = false;
              this.$message(res.data.msg);
            }else{
              this.$alert(res.data.msg);
            }
          if (Array.isArray(res.data.data)) {
            res.data.data.forEach(err=>{
              if(this.msgs[ err.field ]){
                this.msgs[ err.field ] += "<br>"
              }
              this.msgs[ err.field ] += err.defaultMessage;
            });
          }
          if(num == 1){
            this.current = 1;
            this.queryStudios();
          }else if(num == 2){
            this.queryStudios();
          }

        });
        this.studios = {name:'',addr:'',des:'',image:'',status:''};
        this.tel = '';
        this.time = '';
      },
      show(){
        this.num = 1;
        this.dialogFormVisible = true;
        this.studios = {name:'',addr:'',des:'',image:'',status:''};
      },
      queryStudios(){
        axios.post(`../studios/queryStudios?current=${this.current}&size=${this.size}`,this.studios).then(res=>{
          this.tableData = res.data;
        });
      },
      changeCurrent(newPage){
        this.current = newPage;
        this.queryStudios();
      },
      update(obj){
        this.num = 2;
        this.studios = obj;
        this.dialogFormVisible = true;
      },
      del(obj){
        axios.post("../studios/del",obj).then(res=>{
          if(res.data.code == 1){
            this.queryStudios();
            this.$message(res.data.msg);
          }else{
            this.$alert(res.data.msg);
          }
        });
      }




    },
    created(){
      this.queryStudios();
    }
  });
</script>
</body>
</html>